<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="x-ua-compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>向往的生活家</title>
		<link rel="shortcut icon" type="image/x-icon" href="img/user/logo.ico" />
		<!-- 引入 Bootstrap -->
        <link href="css/bootstrap.css" rel="stylesheet">
        <link rel="stylesheet" href="css/base.css" />       
        <link rel="stylesheet" href="css/navigation.css" />
        <link rel="stylesheet" href="css/iconfont.css" />     
        <link rel="stylesheet" type="text/css" href="css/userindex.css"/>
	 	<style type="text/css">
	 		.wen{
	 			overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;
				width: 180px;
	 		}
	 		.nav > li > a {
			    position: relative;
			    display: block;
			    padding: 10px 9px;
			}
	 	</style>
	</head>
	<body>
	<!--菜单栏-->
	<script type="text/javascript" src="js/top.js" ></script>
    <!--菜单栏-->
    <div class="user" style="">
		<div class="container">
			 <div class="row">
			 	<div class="col-lg-2  col-xs-12 left">
			 		<!-- 选项卡菜单 -->
	                <ul class="nav nav-pills navbar-default" >
	                    <li class="active"><a href="#home"  role="tab" data-toggle="tab"><i class="iconfont">&#xe69e;</i>我的主页</a></li>
	                    <li ><a href="#usercen"  role="tab" data-toggle="tab"><i class="iconfont">&#xe604;</i>用户中心</a></li>
	                    <li ><a href="#set"  role="tab" data-toggle="tab"><i class="iconfont">&#xe65b;</i>基本设置</a></li>
	                    <li ><a href="#mymsg"  role="tab" data-toggle="tab"><i class="iconfont">&#xe6a5;</i>我的消息</a></li>
	                </ul>
			 	
			 	</div>
			 	<div class="col-lg-10 col-xs-12 right">
			 		<div class="tab-content">
	                    <!--我的主页-->
	                    <div role="tabpanel" class="tab-pane active" id="home">
	                    	<div class="row">
	                    		<div class="col-lg-12  col-xs-12" >
	                    			<div class="home-head">
	                    				<img src="img/anonymous.png"/>
	                    			</div>
	                    			<div class="home-content">
	                    				<h2> 故人<i class="iconfont"></i></h2>
	                    				<p>
	                    					<span><i class="iconfont"></i>加入时间：<br/>
	                    						<span>2018-4-12</span>
	                    					</span>
	                    					<span><i class="iconfont"></i>发表文章数：<br/>
	                    						<span>12篇</span>
	                    					</span>
	                    					<span><i class="iconfont"></i>回复评论数：<br/>
	                    						<span>3条</span>
	                    					</span>
	                    				</p>
	                    			</div>
	                    			<div class="home-bottom">
	                    				 <div class="row">
	                    				 	 <div class="col-lg-6  col-xs-12">
	                    				 	 	<div class="panel panel-default">
													    <div class="panel-heading">
													        	我最近的热门游记和攻略
													    </div>
													    <div class="panel-body">
													        <p>
													        	<span class="jing">精</span>
													        	<a href="">
													        		<span class="wen">时间物语，踩过千年尘埃</span> 
													        	</a>
													        	<span >
													        		<i>刚刚</i>
													        		<br />
													        		<em >1136阅/27答</em>
													        	</span>
													        </p>
													        <p>
													        	<a href="" >
													        		<span class="wen">时间物语，踩过千年尘埃的足迹</span>
													        	</a>
													        	<i>刚刚</i>
													        	<em >1136阅/27答</em>
													        </p>
													        <p>
													        	<a href="">
													        		<span class="wen">时间物语，踩过千年尘埃的足迹</span>
													        	</a>
													        	<i>刚刚</i>
													        	<em >1136阅/27答</em>
													        </p>
													    </div>
												</div>
	                    				 	 </div>
	                    				 	 <div class="col-lg-6  col-xs-12">
	                    				 	 	<div class="panel panel-default">
													    <div class="panel-heading">
													                     我最近的回答：
													    </div>
													    <div class="panel-body">
													        <p>													        					
													        	<span class="answer">一分钟前&nbsp;&nbsp;在<a href="">万盛七条精品旅游线路，不容错过哟</a>&nbsp;&nbsp;中回答：</span>
													        	<div class="home-dacontent">
														            海孔抗战遗址、慕林酒庄、绿水金色田园、聚农葡萄采摘园、石道寺、白龙湖
														        </div>
													        </p>
													    </div>
												</div>
	                    				 	 </div>
	                    				 </div>
	                    				
	                    			</div>
	                    			
	                    		</div>
		                    		
	                    	</div>
	                    </div>
	                    <!--用户中心-->
	                    <div role="tabpanel" class="tab-pane " id="usercen">
	                    	<div class="user_center">
								 <a href="javascript:void(0);" class="tab_click action">我发布的游记(<span>3</span>)</a>
								 <a href="javascript:void(0);" class="tab_click">我关注的游记</a>
							</div>
							<div class="user_tab">
								<div class="tab_0">
									<p>
							        	<a href="" >时间物语，踩过千年尘埃的足迹 </a>
							        	<span>2017/3/14 08:30:00</span>
							        	<a class="mine-edit" href="">编辑</a>
							        	<em >11阅/0答</em>
							        </p>
							        <p>
							        	<a href="" >时间物语，踩过千年尘埃的足迹 </a>
							        	<span>2017/3/14 08:30:00</span>
							        	<a class="mine-edit" href="">编辑</a>
							        	<em >11阅/0答</em>
							        </p>
								</div>
								<div class="tab_1" style="display: none;">
									<p>
							        	<a href="" >时间物语，踩过千年尘埃的足迹 </a>
							        	<span>关注于23小时前</span>
							        	
							        </p>
								</div>
							</div>
	                    </div>
	                    <!--基本设置-->
	                    <div role="tabpanel" class="tab-pane set" id="set">
	                    	<div class="basic_center">
								 <a href="javascript:void(0);" class="set_click setaction">我的资料</a>
								 <a href="javascript:void(0);" class="set_click">头像</a>
								 <a href="javascript:void(0);" class="set_click">密码</a>
							</div>
							<div class="basic_set">
								<div class="set_0">									
									<div class="row">
										<div class="col-lg-4">
											<div class="input-group">
												<span class="input-group-addon">用户名:</span>
												<input type="text" class="form-control" placeholder="故人">
											</div>		
										</div>
									</div>	
									<div class="row">
										<div class="col-lg-4">
											<div class="input-group">
												<span class="input-group-addon">电&nbsp;&nbsp;话:&nbsp;</span>
												<input type="text" class="form-control" placeholder="13330271280">
											</div>
										</div>
									</div>	
									<div class="row">
										<div class="col-lg-4">
											<div class="input-group">
												<span class="input-group-addon">城&nbsp;&nbsp;市:&nbsp;</span>
												<input type="text" class="form-control" placeholder="永川">
											</div>		
										</div>	
									</div>	
									<div class="row">
										<div class="panel panel-default">
											<div class="panel-heading">
												<h3 class="panel-title">
													签名
												</h3>
											</div>
											<div class="panel-body">
												<textarea placeholder="随便写些什么刷下存在感" i name="sign" autocomplete="off" class="textarea"></textarea>
											</div>
										</div>
										<button type="button" class="btn btn-warning confim">确认修改</button>
									</div>
								</div>
								<div class="set_1" style="display: none;">
									 <div class="avatar-add">
						                <p>建议尺寸256*256，支持jpg、png、gif，最大不能超过500KB</p>
						                <div class="upload-img" style="background-color: #009688;padding: 4px;padding-left: 10px;">						                	
						                  <span  style="position: absolute;"> <i class="iconfont">&#xe61a;</i>上传头像</span>
						                 <input name="headShot" style="width: 104px;opacity: 0;" id="headShot" onchange="preview(this)" type="file" value="上传照片">
						                </div>
						                <img src="img/anonymous.png"  id="previewImg">
						                <span class="loading"></span>
						              </div>
								</div>
								<div class="set_2" style="display: none;">
									<div class="row">
										<div class="form-group ">
											<label class="col-lg-1 control-label div-label" for="inputSuccess">
												旧密码:
											</label>
											<div class="col-lg-4">
												<input type="text" class="form-control" placeholder="请输入旧密码" id="inputSuccess">
											</div>
										</div>
									</div>	
									<div class="row">
										<div class="form-group ">
											<label class="col-lg-1 control-label div-label" for="inputSuccess">
												新密码:
											</label>
											<div class="col-lg-4">
												<input type="text" class="form-control" placeholder="新密码" id="inputSuccess">
											</div>
										</div>
									</div>	
									<div class="row">
										<div class="form-group ">
											<label class="col-lg-1 control-label div-label" for="inputSuccess">
												确认密码:
											</label>
											<div class="col-lg-4">
												<input type="text" class="form-control" placeholder="确认密码" id="inputSuccess">
											</div>
										</div>
									</div>	
									<button type="button" class="btn btn-warning confim">确认修改</button>
								</div>
							</div>

			                
	                    </div>
	                    <!--我的消息-->
	                    <div role="tabpanel" class="tab-pane " id="mymsg">
	                    	<button type="button" class="btn btn-danger">清空全部消息</button>
	                    	<div class="row">
	                    		<div class="col-lg-12 msg-all">
	                    			<blockquote class="msg_answer">
						              <a href="" target="_blank"><cite>晚风</cite></a>评论了您的游记<a target="_blank" href=""><cite>永川哪里最好玩？</cite></a>
						            </blockquote>
						            <p class="msg-label"><span>1小时前</span><a href="javascript:;" class="btn btn-danger">删除</a></p>
	                    			<p style="border-bottom: 1px dotted #E9E9E9;"></p>
	                    		</div>
	                    		<div class="col-lg-12 msg-all">
	                    			<blockquote class="msg_answer">
						              <a href="" target="_blank">系统消息：欢迎加入向往的生活家！</a>
						            </blockquote>
						            <p class="msg-label"><span>1天前</span><a href="javascript:;" class="btn btn-danger">删除</a></p>
	                    			<p style="border-bottom: 1px dotted #E9E9E9;"></p>
	                    		</div>
	                    		
	                    	</div>
	                    </div>
	                </div>    
			 	</div>
			 	
			 </div>
			
			
		</div>
	</div>		
	<!--在767px下面的操作-->
	<!--<div class="menu">
    <i class="iconfont">&#xe605;</i>
  </div>-->
	
	<!--返回顶部-->	
	<div class="gotop" style="display: none;">
        	<span><img src="img/top.png" ></span>
    </div>	
    
    <!--底部 start-->
    <script type="text/javascript" src="js/foot.js" ></script>
    <!--底部 end-->
   
	
	   
	<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
	<script src="js/navigation.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" src="js/bootstrap.min.js" ></script>
	<script src="js/navigation.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
			//用户中心
    	    $(".tab_click").eq(0).addClass("action");
			$(".tab_click").each(function(n){
				$(this).click(function(){
				 $(".tab_"+n).siblings().hide();
				 $(".tab_click").siblings().removeClass("action");
				 $(".tab_click").eq(n).addClass("action");
				 $(".tab_"+n).show();
			})
          })
			//基本设置
		 $(".set_click").eq(0).addClass("setaction");
			$(".set_click").each(function(n){
				$(this).click(function(){
				 $(".set_"+n).siblings().hide();
				 $(".set_click").siblings().removeClass("setaction");
				 $(".set_click").eq(n).addClass("setaction");
				 $(".set_"+n).show();
			})
          })
		
    	});	
		//头像
		function validate() {
			var headShot = document.getElementById("headShot");
			if (headShot.value == "") {	
				headShot.focus();
				return false;
			}
			return true;
		}
		function preview(obj){
	      //判断是否支持FileReader
	      if (window.FileReader) {
	          var reader = new FileReader();
	      } else {
	          alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
	      }
	
	      //获取文件
	      var file = obj.files[0];
	      var imageType = /^image\//;
	      //是否是图片
	      if (!imageType.test(file.type)) {
	          alert("请选择图片！");
	          //return;
	      }
	      //读取完成
	      reader.onload = function(e) {
	          //获取图片dom
	          var img = document.getElementById("previewImg");
	          //图片路径设置为读取的图片
	          img.src = e.target.result;
	      };
	      reader.readAsDataURL(file);
	      
	    
	      
	  }
	 
    	
	
		</script>
	
	</body>
	
</html>
